<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div
    class="w-full h-[100vh] login-page flex items-center justify-end sm:pr-25 md:pr-50 lg:pr-100"
  >
    <div class="w-full h-full sm:w-105 sm:h-auto bg-white sm:rounded-xl overflow-hidden">
      <div class="w-full pb-6/21 relative">
        <img
          src="../assets/images/login-banner.png"
          alt="logo"
          class="w-full h-full object-cover absolute top-0 left-0"
        />
      </div>
      <!-- 类型选择 -->
      <ul
        class="flex py-8 text-lg relative after:content-[''] after:absolute after:bottom-0 after:left-1/2 after:top-1/2 after:transform after:-translate-x-1/2 after:-translate-y-1/2 after:w-[1px] after:h-10 after:bg-[#E5E5E5]"
      >
        <li
          class="flex-1 text-center cursor-pointer"
          :class="formState.identity === IdentityEnum.Student ? 'primary-color' : ''"
          @click="formState.identity = IdentityEnum.Student"
        >
          學生登錄
        </li>
        <li
          class="flex-1 text-center cursor-pointer"
          :class="formState.identity === IdentityEnum.Teacher ? 'primary-color' : ''"
          @click="formState.identity = IdentityEnum.Teacher"
        >
          教師登錄
        </li>
      </ul>
      <div class="p-7 pt-0">
        <a-form :model="formState" autocomplete="off" ref="loginRef">
          <a-form-item
            name="account"
            :rules="[
              { required: true, message: '請輸入您的賬號！' },
              { min: 6, message: '賬號長度不能少於6位！' },
            ]"
          >
            <a-input v-model:value="formState.account" placeholder="請輸入您的賬號">
              <template #prefix>
                <img src="../assets/images/user.png" alt="" class="size-4" />
              </template>
            </a-input>
          </a-form-item>
          <a-form-item
            name="loginpass"
            :rules="[
              { required: true, message: '請輸入您的密碼！' },
              { min: 6, message: '密碼長度不能少於6位！' },
            ]"
          >
            <a-input-password
              v-model:value="formState.loginpass"
              placeholder="請輸入您的密碼"
              autocomplete="off"
            >
              <template #prefix>
                <img src="../assets/images/pwd.png" alt="" class="size-4" />
              </template>
            </a-input-password>
          </a-form-item>
          <a-form-item>
            <a-checkbox v-model:checked="formState.remember">記住密碼</a-checkbox>
          </a-form-item>
        </a-form>
        <div class="w-full">
          <a-button type="primary" style="height: 40px; width: 100%" @click="login">
            立即登錄
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { theme } from 'ant-design-vue'
import { loginApi } from '@/api'
import { useUserStore } from '@/stores'
import { type LoginType, IdentityEnum, type LoginResponseType } from '@/api/type'
import { encrypt, decrypt } from '@/utils/crypto'
const { token: themeToken } = theme.useToken()
const router = useRouter()

const loginRef = ref()
const formState = ref<LoginType>({
  account: '',
  loginpass: '',
  identity: IdentityEnum.Student,
  remember: false,
})

const login = () => {
  const { setUser, setToken } = useUserStore()
  loginRef.value.validate().then(() => {
    const { remember, ...params } = formState.value
    loginApi(params).then((res: LoginResponseType) => {
      // 記住密碼
      if (remember) {
        localStorage.setItem('remember', encrypt(JSON.stringify(formState.value)))
      }
      // 設置用戶信息
      setUser()
      setToken(res.token.access_token)
      if (formState.value.identity === IdentityEnum.Student) {
        router.replace('/select')
      } else {
        router.replace('/user-info')
      }
    })
  })
}
onMounted(() => {
  const remember = localStorage.getItem('remember')

  if (remember) {
    const rememberFormState = decrypt(remember)
    console.log(rememberFormState)
    if (rememberFormState) {
      formState.value = JSON.parse(rememberFormState)
    }
  }
})
</script>

<style scoped>
.login-page {
  background: url('../assets/images/login-bg.png') no-repeat center center;
  background-size: cover;
}
.primary-color {
  color: v-bind('themeToken.colorPrimary');
}
:deep(.ant-input-affix-wrapper) {
  height: 48px;
  border-radius: 8px;
}
</style>
